<%--
  Created by IntelliJ IDEA.
  User: 花花
  Date: 2021/6/25
  Time: 12:05
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path=request.getContextPath();
%>
<html>
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
</head>
<body style="margin: 0;
    padding: 0;
    background-image: url(new.jpg);
background-repeat: no-repeat;">
<div id="bigbox" style="margin: 0 auto;margin-top: 250px;
padding: 20px 50px;background-color: #00000090;
width: 400px;height: 300px;border-radius: 10px;text-align: center;">
    <h1 style="color: white">注册</h1>
    <form action="<%=path%>/register" method="post" id="loginForm1" style="margin-top: 30px;">
        <input style="margin-top: 20px;border: 0;padding: 10px 10px;border-bottom:1px solid white;background-color:#00000000;color:white;"
               placeholder="用户名" type="text" name="uName" id="uName" value="${messageModel.object.userName}"> <br>
        <input style="margin-top: 20px;border: 0;padding: 10px 10px;border-bottom:1px solid white;background-color:#00000000;color:white;"
               placeholder="密码" type="password" name="uPwd" id="uPwd"> <br>
        <span id="msg1" style="font-size: 12px;color: red">${messageModel.msg}</span><br>
        <input style="border:0;width:75px;height:25px;color:white;border-radius: 20px;
        background-image: linear-gradient(to right, #b8cbb8 0%, #b8cbb8 0%, #b465da 0%, #cf6cc9 33%, #ee609c 66%, #ee609c 100%);"
                type="button" id="registerBtn1" value="立即注册">
    </form>
</div>

</body>
<script type="text/javascript" src="js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
    /**
     *
     1.给立即注册按钮绑定点击触发事件
     2.获取用户姓名和密码的值
     3.判断姓名是否为空
        如果姓名为空，提示用户（span赋值）并且return
     4.判断姓名在数据库中是否存在
        如果姓名存在，提示用户（span赋值）并且return
     5.判断密码是否为空
        如果密码为空，提示用户（span赋值）并且return
     6.如果都不为空且符合条件，则手动提交表单
     */
    $("#registerBtn1").click(function (){
        var uName = $("#uName").val();
        var uPwd = $("#uPwd").val();
        if(isEmpty(uName)){
            $("#msg1").html("用户姓名不可为空！");
            return;
        }
        if(isEmpty(uPwd)){
            $("#msg1").html("用户密码不可为空！");
            return;
        }
        $("#loginForm1").submit();
    });


    function isEmpty(str){
        if(str==null || str.trim()==""){
            return true;
        }
        return false;
    }
</script>
</html>
